FigmaのLocal Variablesを使ってコンポーネントプロパティを切り替えるプロトタイピングをつくってみた

プロトタイピングでユーザーの操作に応じて、Local Variablesを使わずコンポーネントの内容を変更する場合、基本的には同一コンポーネントでバリアントを切り替えることになります。

「入れ替え」もできますが、あくまで操作されたオブジェクトを入れ替えるアクションのため、インタラクションで他のオブジェクトへ影響を及ぼすことはできません。

バリアントで状態を再現するために、小さなコンポーネントを組み合わせて巨大なコンポーネントをつくる必要がありましたが、Local Variablesを使うと、異なるコンポーネントの状態を変更できるようになります。

今回は、モーダルダイアログでボタンのバリアントをプレビューできる、次のようなプロトタイプを作成してみました。

このプロトタイプでは、次のアクションを実現しています：

1. モーダルダイアログを表示
2. ダイアログ内のSelectボックスでバリアント（Variant・State・Size）を選択
3. 選択した内容に応じて、ボタンのプレビューを変更

オフィシャルのヘルプは「プロトタイプでバリアブルを使用する」です。

• 記事執筆時点でLocal Variablesはベータ版です。
• この記事の内容は有料プランでのみ使用できます。

プロトタイプの作成

次の流れで作成していきます。

1. メインコンポーネントでバリアントを作成する
2. パーツを作成する
3. Local Variablesを設定する
4. 選択された項目に応じて、バリアントを切り替えるインタラクションを設定する

メインコンポーネントでバリアントを作成する

作成するといいながら、今回はShadcn/uiというライブラリを使用します。

ちなみにStyleが設定できるコンポーネントは、すべて「New York」にしています。

パーツを作成する

Selectコンポーネント

LabelとSelectコンポーネントをライブラリから挿入します。

Selectコンポーネントの値に当たる部分にテキストプロパティが設定されており、このままではLocal Variablesと関連付けできないため、一旦「インスタンスの切り離し（detach）」をします。

Labelコンポーネントを適当な位置に配置して、インスタンスの切り離しをしたSelectコンポーネントと合わせてコンポーネント化しましょう。今回はPropertySelectorという名前しました。

今回はインスタンスの切り離しをしていますが、メインコンポーネント側でLocal Variablesと関連付けしておけば、インスタンスでもLocal Variablesと関連付けは可能です。

Selectコンポーネントの選択肢（中身）

Buttonコンポーネントプロパティに合わせて、「Variant」「State」「Size」の3つの中身を作成します。

まずはItemコンポーネントをライブラリから挿入します。（shadcnを使っている場合、検索すると2つ出てくると思いますが、どちらでもOKです）

複製しながらそれぞれのプロパティの値をラベルに設定、プロパティごとにAuto Layoutでまとめて、フレームに名前をつけておきましょう。

後工程が煩雑になるため、バリアントの一部を省略して作成しています。

プレビューダイアログウィンドウ

上にボタンのプレビュー領域、下にプロパティのセレクターを配置するように作成していきます。

Buttonコンポーネントを配置、Auto Layoutでボタンがセンターになるように設定し、ボタンのサイズが変わってもいいように上下左右の余白を調整しておきます。

PropertySelectorのインスタンスを配置し、ラベルとSelect部分の初期値を変更します。適当に配置し、Auto Layoutを適用しておきましょう。

ダイアログウィンドウはDialogコンポーネントを流用します。

Dialogコンポーネントを挿入してインスタンスの切り離しを実行し、Slot（Content / Footer）を削除、descriptionプロパティも削除するか非表示にします。

コンテンツをコンポーネント化し、Slotに入れるのが本来の使い方ですが、今回はサンプルのため作りやすさを優先しています。

ダイアログのタイトルを適当な名前に変更、ボタンのプレビュー領域とプロパティセレクターをDialog内に配置し、幅などの体裁を整えておきます。

初期画面

適当な大きさのフレームを作成し、ダイアログ表示のトリガーとなるボタンを真ん中に配置します。

Local Variablesを設定する

プロトタイプ用のLocal Variablesを作成します。

デフォルトのCollection名「Collection 1」をリネームして、今回は直球で「Prototyping」という名前にしました。（リネームしなくても問題ないです）

Create VariableボタンをクリックしてStringを選択し、Prototypingコレクションにバリアブルを作成していきます。

今回変更するボタンのコンポーネントプロパティは「Variant」「State」「Size」の3つのため、Variable Nameはそれぞれにselectedという接頭辞をつけて「selectedVariant」「selectedState」「selectedSize」としました。

Valueは初期値である「Primary」「Default」「Default」です。Valueはコンポーネントプロパティの値と完全に一致するように、大文字・小文字などに気をつけて設定しましょう。

インタラクションを設定する

モーダルウィンドウ表示ボタン

まずはダイアログウィンドウを表示させるボタンに、クリックトリガーで「Open Overlay」のアクションを設定し、プレビューウィンドウを表示するインタラクションを設定します。

プロトタイプを実行中、Local Variablesは自動で最初値に戻らないため、任意のタイミングで戻してやる必要があります。このアクションを、モーダルを開くトリガーに追加で設定します。

右上の＋アイコンから、Set Variableを選択します。3つのプロパティがあるので、selectedVariantをPrimaryに、selectedStateをDefault に、selectedSizeをDefault になるように設定してください。

ボタンとLocal Variablesを関連づける

Local Variablesの変更を、コンポーネントプロパティへ反映できるように、関連付けをしていきます。

プレビューに配置したButtonコンポーネントの各プロパティの右にある六角形のアイコンをクリックし、そのプロパティと関連づけるLocal Variablesを選択します。

プロパティとLocal Variablesが関連づけられると、四角で囲われたLocal Variablesの名前が表示されます。

Variant・State・Sizeの3つを関連づけしましょう。

プロパティセレクター

押下したときに、選択肢がOverlayで表示できるよう、それぞれのセレクターでクリックトリガーに「Open Overlay」のアクションを設定します。

表示位置は「Manual」に変更し、PropertySelectorの下に選択肢が表示されるように調整します。領域外をクリックしたときに閉じる設定（Close when clicking outside）もしておきましょう。

プロパティセレクターの選択肢

選択肢をクリックしたときのインタラクションとして、選んだ内容をLocal Variablesに反映させるSet Variableをすべての項目に設定します。例えばVariantのGhostであれば、selectedVariantをGhostにするという具合です。

またこのままだと、項目を選択してもOverlayが表示されたままになるので、同じトリガーにClose overlayのアクションも設定しましょう。

設定は以上です。

プロトタイプを実行する

Shift + Spaceで再生します。

選択した項目に応じてボタンの見た目が変われば完了です。

まとめ

これまでだと、状態とコンポーネントのスタイルを一緒くたに作成……例えば選択肢が3つある単純なラジオボタンの動作を再現するだけでも、ラジオボタン3つのグループでコンポーネントを作成し、さらにラジオボタンの選択状態の数だけバリアントが必要でした。

状態管理をLocal Variablesにまかせることで、スタイルと状態を分離してコンポーネントの独立性を保つことができます。もちろん、Local Variablesの管理やDevモードを使わない場合の伝え方など別の課題も出てきますが、複雑なコンポーネント管理とはおさらばできるかもしれませんね。

あとは「プロトタイピングでどこまでつくるか問題」は常に付き纏いますが……